<template>
  <el-menu class="aside-menu"
           router
           :collapse="isCollapse"
           :default-openeds="defaultOpeneds"
           :default-active="currentHash"
           :unique-opened="true"
           @select="handleSelect">
    <el-menu-item>
      <i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
      <span slot="title">收起</span>
    </el-menu-item>
    <template v-if="type === 1">
      <el-menu-item v-for="item in adminMenuItems" :key="item.index" :index="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
    <template v-if="type === 2">
      <el-menu-item v-for="item in hrMenuItems" :key="item.index" :index="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
    <template v-if="type === 3">
      <el-menu-item v-for="item in jobSeekerMenuItems" :key="item.index" :index="item.index">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Aside',
  data () {
    return {
      isCollapse: false,
      navbars: [],
      defaultOpeneds: [],
      type: 0,
      adminMenuItems: [
        { index: '/Home', icon: 'el-icon-s-home', title: '主页' },
        { index: '/AdminList', icon: 'el-icon-user-solid', title: '管理员' },
        { index: '/EnterpriseList', icon: 'el-icon-office-building', title: '企业信息' },
        { index: '/DepartmentList', icon: 'el-icon-s-grid', title: '部门信息' },
        { index: '/RecruiterList', icon: 'el-icon-s-custom', title: '招聘专员信息' },
        { index: '/JobDescriptionList', icon: 'el-icon-guide', title: '招聘岗位' },
        { index: '/CandidateList', icon: 'el-icon-user', title: '应聘者基本信息' },
        { index: '/EducationList', icon: 'el-icon-reading', title: '教育经历' },
        { index: '/WorkExperienceList', icon: 'el-icon-document-copy', title: '工作经历' },
        { index: '/SkillCertificateList', icon: 'el-icon-document-checked', title: '技能证书' },
        { index: '/TrainingRecordList', icon: 'el-icon-coordinate', title: '培训记录' },
        { index: '/ApplicationRecordList', icon: 'el-icon-edit-outline', title: '应聘申请' },
        { index: '/ContractList', icon: 'el-icon-s-claim', title: '劳动合同信息' },
        { index: '/ChartList', icon: 'el-icon-pie-chart', title: '数据统计' }
      ],
      hrMenuItems: [
        { index: '/Home', icon: 'el-icon-house', title: '主页' },
        { index: '/RecruiterAddOfHr', icon: 'el-icon-s-custom', title: '我的信息' },
        { index: '/JobDescriptionListOfHr', icon: 'el-icon-guide', title: '招聘岗位' },
        { index: '/ApplicationRecordListOfHr', icon: 'el-icon-edit-outline', title: '应聘申请' },
        { index: '/ContractList', icon: 'el-icon-s-claim', title: '劳动合同信息' },
        { index: '/ChartList', icon: 'el-icon-pie-chart', title: '数据统计' }
      ],
      jobSeekerMenuItems: [
        { index: '/Home', icon: 'el-icon-house', title: '主页' },
        { index: '/CandidateAddOfJobSeeker', icon: 'el-icon-user', title: '应聘者基本信息' },
        { index: '/EducationListOfJobSeeker', icon: 'el-icon-reading', title: '教育经历' },
        { index: '/WorkExperienceListOfJobSeeker', icon: 'el-icon-document-copy', title: '工作经历' },
        { index: '/SkillCertificateListOfJobSeeker', icon: 'el-icon-document-checked', title: '技能证书' },
        { index: '/TrainingRecordListOfJobSeeker', icon: 'el-icon-coordinate', title: '培训记录' },
        { index: '/ApplicationRecordListOfJobSeeker', icon: 'el-icon-edit-outline', title: '应聘申请' },
        { index: '/ContractList', icon: 'el-icon-s-claim', title: '劳动合同信息' },
      ]
    }
  },
  created () {
  },
  mounted () {
    const type = sessionStorage.getItem('type')
    if (type) {
      this.type = Number(type)
    }
  },
  methods: {
    handleSelect(key) {
      if (!key) {
        this.isCollapse = !this.isCollapse
      }
    }
  },
  computed: {
    currentHash () {
      return this.$router.currentRoute.fullPath
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/styles/var";

.aside-menu {
  height: 100%;
  width: 250px;
}

.brand {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  margin-right: -1px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background: darken($primary-color, 5);
  box-shadow: 0 1px 1px 0 $box-shadow-base;
  white-space: nowrap;

  .platform-name {
    cursor: pointer;
    height: 60px;
    line-height: 60px;
  }
}
</style>
